<template>
	<div class="form">
		<div class="capital">
			<div class="money">
				<p>商家编号：<span>{{busId}}</span></p>
				<p>
					<img src="../../../assets/images/u1311.png"/>
					余额：￥<span>{{amount}}</span>
				</p>
			</div>
			<div class="btnBox">
				<p style="border-bottom: 1px solid #ddd;"><el-button type="primary" @click="load">充值</el-button></p>
				<!--<p><el-button type="danger" @click='withdraw'>提现</el-button></p>-->
			</div>
		</div>
		<div>
			<el-tabs type="border-card">
				<el-tab-pane label="充值记录">
					<el-input class='moneyNumInput' v-model="loadLogFilter.totalFee" placeholder="金额"></el-input>&nbsp;&nbsp;&nbsp;&nbsp;
					<p>
						状态：
						<el-select v-model="loadLogFilter.status" placeholder="请选择">
							<el-option v-for="item in payStatusSelect" :key="item.value" :label="item.label" :value="item.value">
							</el-option>
						</el-select>
					</p>&nbsp;&nbsp;&nbsp;&nbsp;							
					<p style='margin-bottom: 20px;'>
						<el-button type="info" @click='loadLogQuery'>查询</el-button>
						<el-button type="info" @click='loadLogReset'>重置</el-button>
					</p>
					<el-table border :data="loadLogTableData" style="width: 100%">
						<el-table-column prop="createTime" label="充值时间">
						</el-table-column>
						<el-table-column prop="type" label="充值类型" width="120" :formatter='formType'>
						</el-table-column>						
						<el-table-column prop="totalFee" label="充值金额" width="100" :formatter='formFee'>
						</el-table-column>
						<el-table-column prop="id" label="交易单号">
						</el-table-column>
						<el-table-column prop="status" label="交易状态" :formatter="formPayStatus" width="100">
						</el-table-column>
					</el-table>
					<el-pagination  small layout="prev, pager, next" :total="loadLogTotal">
				</el-pagination>
				</el-tab-pane>
				<el-tab-pane label="消费记录">
					<el-input class='moneyNumInput' v-model="withdrawLogFilter.totalFee" placeholder="金额"></el-input>&nbsp;&nbsp;&nbsp;&nbsp;
					<p>
						状态：
						<el-select v-model="withdrawLogFilter.status" placeholder="请选择">&nbsp;&nbsp;&nbsp;&nbsp;
							<el-option v-for="item in formOutStatus" :key="item.value" :label="item.label" :value="item.value">
							</el-option>
						</el-select>
					</p>&nbsp;&nbsp;&nbsp;&nbsp;
					
					<p style='margin-bottom: 20px;'>
						<el-button type="info" @click='withdrawLogQuery'>查询</el-button>
						<el-button type="info" @click='withdrawLogReset'>重置</el-button>
					</p>
					<el-table border :data="withdrawLogTableData" style="width: 100%">
						<el-table-column prop="createTime" label="消费时间">
						</el-table-column>
						<el-table-column prop="type" label="消费类型" width="120" :formatter='formType'>
						</el-table-column>						
						<el-table-column prop="totalFee" label="消费金额" width="100" :formatter='formFee'>
						</el-table-column>
						<el-table-column prop="id" label="交易单号">
						</el-table-column>
						<!--<el-table-column prop="status" label="交易状态" :formatter="formOutStatus" width="100">
						</el-table-column>-->
					</el-table>
					<el-pagination small layout="prev, pager, next" :total="withdrawLogTotal">
					</el-pagination>
				</el-tab-pane>
			</el-tabs>
		</div>

		<!--查看弹窗-->
		<el-dialog title="充值提现" :visible.sync="centerDialogVisible" width="35%" center>
			<div class="dialog">
				<el-form ref="ruleForm" :model="ruleForm" :rules="rules" auto-complete="on" label-position="left">					
					<p>
						<el-form-item prop='totalFee' label='金额'>
							<el-input-number v-model="ruleForm.totalFee" :precision="2" :step="1" :min='200'></el-input-number>
						</el-form-item>
					</p>
					<p>
						<el-button type="primary" @click='dealByAlipay' v-if="operation==2">支付宝</el-button>
	  					<el-button type="success" @click='dealByWeChat' v-if="operation==1">微信</el-button>
					</p>
				</el-form>
			</div>
			<el-dialog
		      	width="30%"
		      	title="扫描二维码"
		      	:visible.sync="innerVisible"
		      	append-to-body
		      	:before-close='closeInnerDialog'
		      	center>
		      	<p><img :src="codeUrl" v-if="scan"/></p>		      	
		      	<p v-if='!scan' class='scanSuccess'>
		      		充值成功！
		      	</p>
		    </el-dialog>
		</el-dialog>
	</div>
</template>

<script type="text/javascript">
	import {accountInfo,payUnifiedOrder,payRechargeRecord,formatter,payQueryOrder,accountIsAlipay,paySendRedpack,accountWithdrawalsRecord} from "@/api/common"
	export default {
		created(){
			this.loadLogQuery();
			clearInterval(this.timer);
			this.withdrawLogQuery();
			this.setMerMsg();
		},
		methods: {
			formOutStatus(row, column){		
				return(formatter(row.status,this.outStatusSelect))
			},
			formPayStatus(row, column){		
				return(formatter(row.status,this.payStatusSelect))
			},
			formType(row, column){		
				return(formatter(row.type,this.typeSelect))
			},
			formFee(row, column){
				return parseInt(row.totalFee) / 100;
			},			
			setMerMsg(){
				accountInfo().then(res =>{
					this.amount = parseInt(res.data.amount) / 100;
					this.busId = res.data.busId;
				}).catch(res =>{
					this.$message.error(res.msg)
				})
			},
			setTimer(outTradeNo){
				this.timer = setInterval(() =>{
					payQueryOrder(outTradeNo).then(res =>{
						if(res.data == true){
							clearInterval(this.timer);
							this.scan = false;
							this.loadLogQuery();
							this.setMerMsg();
						}
					}).catch(res =>{
						this.$message.error(res.msg)
					})
				},3000)
			},
			closeInnerDialog(done){							//关闭二维码时关闭定时器请求
				clearInterval(this.timer);
				done();
			},
			load(){											//充值
				this.operation = 1;
				this.centerDialogVisible = true;
			},
			withdraw(){										//提现
				this.operation = 2;
				accountIsAlipay().then(res =>{											
					this.centerDialogVisible = true;
				}).catch(res =>{
					this.$router.push('/fund/bankCard')
				})				
			},
			loadLogQuery(){
				console.log(this.loadLogFilter)
				payRechargeRecord(this.loadLogFilter).then(res =>{
					this.loadLogTableData = res.data.records;
					this.loadLogTotal = res.data.total;
					console.log(res)
				}).catch(res =>{
					this.$message.error(res.msg)
				})
			},
			loadLogReset(){
				this.loadLogFilter = {			
					status: '', 		//状态
					totalFee:null,			//金额
					creatTime:[],			//时间
					current:1,			//当前页
					size:10,			//每页条数
				};
				this.loadLogQuery();
			},
			withdrawLogQuery(){
				accountWithdrawalsRecord(this.withdrawLogFilter).then(res =>{
					this.withdrawLogTableData = res.data.records;
					this.withdrawLogTotal = res.data.total;
					//console.log(res)
				}).catch(res =>{
					this.$message.error(res.msg)
				})
			},
			withdrawLogReset(){
				this.withdrawLogFilter = {			
					status: '', 		//状态
					totalFee:null,			//金额
					creatTime:[],			//时间
					current:1,			//当前页
					size:10,			//每页条数
				};
				this.withdrawLogQuery();
			},
			dealByAlipay(){				 
				this.$refs.ruleForm.validate(valid => {
					if(valid){ 
						if(this.operation === 1){
							this.innerVisible = true;
						}else{
							paySendRedpack(this.ruleForm).then(res =>{
								console.log(this.ruleForm)
								this.withdrawLogQuery();
								this.setMerMsg();
								this.centerDialogVisible = false;
								this.$message.success(res.msg)
							}).catch(res =>{
								this.$message.error(res.msg)
							})
						}
					}
				})
			},
			dealByWeChat(){
				this.$refs.ruleForm.validate(valid => {
					if(valid){
						if(this.operation === 1){
							payUnifiedOrder(this.ruleForm).then(res =>{
								this.codeUrl = "data:image/jpg;base64," + res.data.qrcode;
								this.innerVisible = true;
								this.setTimer(res.data.outTradeNo);
							}).catch(res =>{
								this.$message.error(res.msg)
							})
						}else{
							
						}
					}
				})
			},
		},
		data() {
			return {
				busId:'',					//商家id
				amount:null,				//余额
				loadLogFilter:{				//充值查询
					busId:'',
					status: '', 		//状态
					totalFee:null,			//金额
					creatTime:[],			//时间
					current:1,			//当前页
					size:10,			//每页条数
				},			
				withdrawLogFilter:{			//提现查询
					status: '', 		//状态
					totalFee:null,			//金额
					creatTime:[],			//时间
					current:1,			//当前页
					size:10,			//每页条数
				},
				ruleForm:{					//充值提现操作数据
					totalFee:null
				},		
				rules:{
					num: [
            			{ type: 'number',required: true, message: '请输入数字金额', trigger: 'blur' }
          			],
				},
				operation:1,			//操作方式  1充值  2提现
				loadLogTotal:null,
				withdrawLogTotal:null,
				loadLogTableData: [],
				withdrawLogTableData: [],				
				centerDialogVisible: false,
				innerVisible:false,
				codeUrl:'',				//二维码数据流
				timer:null,				//定时器
				scan:true,				//是否扫描
				outStatusSelect: [{ 			//提现状态状态下拉框
					value: 0,
					label: '审核中'
				}, {
					value: 1,
					label: '审核通过'
				}, {
					value: 2,
					label: '审核不通过'
				}],
				
				payStatusSelect: [{    		//充值状态下拉框
					value: 0,
					label: '未支付'
				}, {
					value: 1,
					label: '已支付'
				}],
				
				typeSelect: [{    		//类型下拉框
					value: 0,
					label: '微信'
				}, {
					value: 1,
					label: '支付宝'
				}, {
					value: 2,
					label: '运营充值'
				}],
				
				pickerOptions2: { //日期选择框
					shortcuts: [{
						text: '最近一周',
						onClick(picker) {
							const end = new Date();
							const start = new Date();
							start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
							picker.$emit('pick', [start, end]);
						}
					}, {
						text: '最近一个月',
						onClick(picker) {
							const end = new Date();
							const start = new Date();
							start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
							picker.$emit('pick', [start, end]);
						}
					}, {
						text: '最近三个月',
						onClick(picker) {
							const end = new Date();
							const start = new Date();
							start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
							picker.$emit('pick', [start, end]);
						}
					}]
				},
			}
		}
	}
</script>

<style scoped="scoped">
	.form .moneyNumInput {
		width: 120px;
		margin-bottom: 20px;
	}
	.form .el-input,.form .el-select{
		width: 120px;
		margin-bottom: 20px;
	}
	.form p {
		display: inline-block;
		padding: 0;
		margin: 0;
	}
	
	.capital{
		border: 1px solid #ddd;	
		margin: 20px auto;
		overflow: hidden;
		width:350px;
	}
	
	.money {
		float: left;		
	}
	.btnBox {
		float: right;		
	}
	.money img{
		width:50px;
		vertical-align: bottom;
	}
	.btnBox {
		border-left: 1px solid #ddd;
		text-align: center;
	}
	.money p{
		display: block;
		padding:20px
	}
	.btnBox p{
		display: block;
		padding:20px
	}
	.el-dialog__body {
		text-align: center;
	}
	.el-dialog__body img {
		width:100%
	}
	
	.dialog p {
		display: block;
	}
	.scanSuccess {
		font-size: 30px;
		font-weight: bold;
		text-align: center;
	}
	.el-pagination .btn-prev {
		padding-right:0 !important
	}
</style>